<template>
  <input
    class="w-full heading-m-medium grow text-c-grey-3xl focus:outline-none placeholder:text-c-grey-large"
    :type="type"
    :placeholder="placeholder"
    :value="value"
    @input="updateValue"
  />
</template>

<script setup lang="ts">
interface Props {
  placeholder: string
  type?: 'text' | 'password'
}
const emit = defineEmits(['update:modelValue'])
const props = withDefaults(defineProps<Props>(), {
  placeholder: 'Input something',
  type: 'text',
  value: ''
})
const { placeholder, type, value } = toRefs(props)
const updateValue = (e: Event) => {
  emit('update:modelValue', (e.target as HTMLInputElement).value)
}
</script>

<style scoped></style>
